<template>
  <div class="match_list table-theme">
    <head-title title="运营--补/换货列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
						:option-list="onlineList"
						:value="is_online"
						placeholder="选择商品类型"
						type="is_online"
						@value="setSelectValue"
					>
					</select-view>
          <select-view
						:option-list="typeList"
						:value="type"
						placeholder="选择类型"
						type="type"
						@value="setSelectValue"
					>
					</select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table :data="list" stripe>
        <el-table-column
          label="序号"
          align="center"
          prop="after_goods_id"
        ></el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          prop="goods_name"
        ></el-table-column>
        <el-table-column
          label="商品ID"
          align="center"
          prop="goods_id"
        ></el-table-column>
        <el-table-column
          label="skuID"
          align="center"
          prop="sku_id"
        ></el-table-column>
        <el-table-column label="商品图片" align="center" width="100">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.images_list[0]"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="尺寸"
          align="center"
          prop="size"
        ></el-table-column>
        <el-table-column
          label="颜色"
          align="center"
          prop="color"
        ></el-table-column>
        <el-table-column
          label="材质"
          align="center"
          prop="lining"
        ></el-table-column>
        <el-table-column
          label="商品类型"
          align="center"
          prop="is_online"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openDialog('edit',scope.row.after_goods_id)">编辑</el-button>
            <el-button size="mini" type="primary" @click="openDialog('details',scope.row.after_goods_id)">详情</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="onDel(scope.row.after_goods_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="30"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px" center
		 :modal-append-to-body="false" @close="onClose('patchForm')">
			<el-form :model="patchForm" :rules="patchFormRules" label-width="100px" ref="patchForm">
				<el-form-item label="商品类型:" prop="is_online">
					<el-select v-model="patchForm.is_online" :disabled="is_disabled">
						<el-option label="线下产品" :value="1"></el-option>
						<el-option label="线上产品" :value="2"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="类型:" prop="type">
					<el-select v-model="patchForm.type" :disabled="is_disabled">
						<el-option label="补件" :value="1"></el-option>
						<el-option label="换货" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品ID:" v-if="patchForm.is_online == 2" prop="goods_id">
					<el-input v-model="patchForm.goods_id" disabled ></el-input>
					<span style="cursor: pointer;color: #34a1e0;" @click="openGoodsView" v-if="!is_disabled">点这里快速选择商品</span>
				</el-form-item>
				<el-form-item label="sku:" v-if="patchForm.is_online == 2" prop="sku_id">
					<el-select v-model="patchForm.sku_id" placeholder="请选择" v-if="!is_disabled">
						<el-option :label="item.label" :value="item.value" v-for="item in sku_list" :key="item.value"></el-option>
					</el-select>
          <el-input v-model="patchForm.sku_id" v-else :disabled="is_disabled"></el-input>
				</el-form-item>
				<el-form-item label="商品名称:" v-if="patchForm.is_online == 1" prop="goods_name">
					<el-input v-model="patchForm.goods_name" :disabled="is_disabled"></el-input>
				</el-form-item>
        <el-form-item label="内容:" prop="content">
					<el-input v-model="patchForm.content" :disabled="is_disabled"></el-input>
				</el-form-item>
				<el-form-item label="商品图片:" v-if="patchForm.is_online == 1" prop="img">
					<div class="goods_img">
						<div class="img-list" v-if="patchForm.img">
							<div class="img-item" v-for="(item,index) in patchForm.img" :key="index">
								<img :src="item" class="avatar" />
								<i class="el-icon-close del" @click="delImg(index)"></i>
							</div>
						</div>
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return uploadImg(res); } " multipleaccept="image/*" > 
							<i class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div class="el-upload__tip">小于1MB</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="!is_disabled">
				<el-button  @click="onClose('patchForm')">取消</el-button>
				<el-button type="primary" @click="addForm('patchForm')">确定</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import goods from '@/components/layer-dialog/good-recommend.vue';
import SelectView from "@/components/SelectView";
export default {
  data() {
    return {
      optionList: [
        {
          value: 0,
          label: "商品ID",
        },
        {
          value: 1,
          label: "售后ID",
        },
        {
          value: 2,
          label: "商品名称",
        },
      ],
      page: 1,
      total: 0,
      list: [],
      classSelect: 1,
      selectContent: "",
      onlineList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "线下",
        },
        {
          value: 2,
          label: "线上",
        },
      ],
      is_online: "",
      type: "",
      typeList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "补件",
        },
        {
          value: 2,
          label: "换货",
        },
      ],
      title:'',
      dialogVisible:false,
      patchFormRules:{
				is_online:[{required:true,message:'请选择类型'}],
				type:[{required:true,message:'请选择类型'}],
				goods_id:[{required:true,message:'请输入商品ID'}],
				sku_id:[{required:true,message:'请输入skuID'}],
				goods_name:[{required:true,message:'请输入商品名称'}],
				img:[{required:true,message:'请上传图片'}]
			},
      patchForm:{
				is_online:1,
				goods_id:'',
				sku_id:'',
				goods_name:'',
				img:'',
        type:'',
        content:''
			},
      is_disabled:false,
      sku_list:[]
    };
  },
  components: {
    ImgPopover,
    SelectView
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.type = "";
      this.classSelect = 1;
      this.selectContent = "";
      this.is_online = "";
      this.init(1);
    },
    // 获取搜索框
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 20,
        type: this.type,
        is_online: this.is_online,
      };
      if (this.classSelect == 0) {
        data.after_goods_id = this.selectContent;
      } else if (this.classSelect == 1) {
        data.after_id = this.selectContent;
      } else if (this.classSelect == 2) {
        data.goods_name = this.selectContent;
      }
      this.$http(this.$ApiList.AfterGoodsList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.list;
      });
    },
    onDel(after_goods_id) {
      this.$confirm("此操作将永久删除此数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(this.$ApiList.DelAfterGoods, { after_goods_id }).then(
            (res) => {
              this.$message({
                type: "success",
                message: res.datas,
              });
              this.init(this.page);
            }
          );
        })
        .catch(() => {});
    },
    openDialog(type,after_goods_id){
        if(type === 'edit'){
            this.title = '编辑'
            this.is_disabled = false
        }else{
            this.title = '详情'
            this.is_disabled = true
        }
        this.dialogVisible = true;
        this.$http(this.$ApiList.AfterGoodsInfo,{after_goods_id}).then(res=>{
          const { is_online,goods_id,sku_id,goods_name,images_list,type,content } = res.datas
          this.patchForm = {
            is_online,
            goods_id,
            sku_id,
            goods_name,
            img:images_list,
            after_goods_id,
            type,
            content
          }
        })
    },
    onClose(formName){
			this.dialogVisible = false;
			this.$refs[formName].resetFields();
		},
    addForm(formName){
			this.$refs[formName].validate((valid)=>{
				if(valid){
          let data = {}
					if(this.patchForm.is_online == 1){
						delete this.patchForm.goods_id;
						delete this.patchForm.sku_id;
            data = this.patchForm;
            data.img = this.patchForm.img.join(',')
					}else if(this.patchForm.is_online == 2){
						delete this.patchForm.goods_name;
						delete this.patchForm.img;
            data = this.patchForm
					}
          console
					this.$http(this.$ApiList.UpdateAfterGoods,data).then(res=>{
						this.$message.success(res.datas);
						this.dialogVisible = false;
						this.$refs[formName].resetFields();
            this.init(this.page);
					})
				}else{
					this.$message.error('请将必填项填写完整！')
				}
			})
		},
    getGoodsList(goods_id){
			let data ={
				goods_id
			}
			this.sku_list = []
			this.$http(this.$ApiList.GoodsInfo, data).then(res => {
				res.datas.sku_lists.forEach(item=>{
					let obj = {
						label:`${item.color} ${item.lining} ${item.size}`,
						value:item.sku_id
					}
					this.sku_list.push(obj)
				})
			});
		},
    // 上传图片
		uploadImg(params) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);

			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.patchForm.img.push(res.datas[0]);
			});
		},
		openGoodsView(){
			this.$layer.iframe({
				title: '选择商品',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: goods, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						num:'one'
					} //props
				}
			});
		},
		setGoodsId(ids) {
			this.patchForm.goods_id = ids;
		},
    // 删除上传的商品补件图
		delImg(index){
			this.patchForm.img.splice(index,1);
		},
    setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'is_online':
						this.is_online = value
						break;
          case 'type':
            this.type = value
            break;
					default:
						break;
				}
				this.init()
			}
  },
  mounted() {
    this.init();
  },
  watch: {
		'patchForm.goods_id':{
			deep:true,
			handler:function(val){
				if(val){
					this.getGoodsList(val);
				}
			}
		}	
	},
};
</script>

<style lang="scss" scoped>
.goods_img{
		display: flex;
		flex-wrap: wrap;
		.img-list{
			display: flex;
			.img-item{
				position: relative;
				width: 100px;
				height: 100px;
				margin-right: 10px;
				margin-bottom: 10px;
				.del{
					position: absolute;
					z-index: 9;
					right: 2px;
					top: 2px;
					font-size: 18px;
					color: #fff;
					background-color: crimson;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
	}
</style>